<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>驴妈妈统计系统</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${request.contextPath}/assets/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <!-- page specific plugin styles -->
    <!-- text fonts -->
    <link rel="stylesheet" href="${request.contextPath}/assets/css/fonts.googleapis.com.css"/>
    <!-- ace styles -->
    <link rel="stylesheet" href="${request.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet"
          id="main-ace-style"/>
    <link rel="stylesheet" href="${request.contextPath}/assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="${request.contextPath}/assets/css/ace-rtl.min.css"/>
    <!-- ace settings handler -->
    <link rel="stylesheet" href="${request.contextPath}/assets/css/bsie-paginator.css"/>
    <link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.css" />
    <link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${request.contextPath}/stylesheets/loading.css" />
    <link rel="stylesheet"  href="${request.contextPath}/stylesheets/daterangepicker.css">
    <style>
        th {
            text-align: center;
        }
        button {
            height: 30px;
        }
    </style>
</head>

<body class="skin-2" style="background-color: #FFF;" >

<div class="tabbable" >
    <div class="tab-content">
        <div id="manage" class="tab-pane active in" style="width:60%;margin: auto">
            <div class="row">
                <div class="col-xs-12">
                    <!-- 筛选条件开始 -->
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box" style="margin-left: 0px; margin-right: 0px;">
                                <div class="widget-header widget-header-small">
                                    <h4 class="widget-title" style="font-size: 14px; color: #333; font-weight: 700;">超级自由行</h4>
                                </div>
                                <div class="widget-body" style="background-color: #EFF3F8;">
                                    <div class="widget-main">
                                        <form class="form-inline" id="searchForm">
                                            <div class="form-group">
                                                <label for="config-demo">选择时段</label> <input
                                                    type="text" id="config-demo" name="chooseTime"
                                                    class="form-control time">
                                                <button id="app_search1" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
                                                    <span class="ace-icon icon-on-right bigger-110"></span> 昨日
                                                </button>
                                                <button id="app_search2" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
                                                    <span class="ace-icon icon-on-right bigger-110"></span> 过去7天
                                                </button>
                                                <button id="app_search3" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
                                                    <span class="ace-icon icon-on-right bigger-110"></span> 过去31天
                                                </button>
                                                <button id="Search" type="button" class="btn btn-pink btn-sm"
                                                        style="margin-left: 50px; height: 33px; font-size: 14px;">
                                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                                    Search
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 筛选条件结束 -->
                    <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer" style="padding-left: 0px; padding-right: 0px;height: 110px;">
                        <table
                                class="table table-striped table-bordered table-hover dataTable no-footer"
                                aria-describedby="dynamic-table_info">
                            <thead>
                            <tr>
                                <th style="width:15%;">No.</th>
                                <th style="width:60%;">元素名称</th>
                                <th style="width:25%;">点击量</th>
                            </tr>
                            </thead>
                            <tbody id="dataTableBody"></tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="ui-jqgrid" style="display: none; margin-left: 0px; margin-right: 0px; ">
                        <div id="grid-pager"
                             class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
                             dir="ltr">
                            <div id="pg_grid-pager" class="ui-pager-control" role="group">
                                <input type="text" id="currentPage" hidden="true" value=1>
                                <input type="text" id="pageSize" value =15 hidden="false">
                                <table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
                                       style="width: 100%; table-layout: fixed; height: 100%;" role="row" id="proPageTable">
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- 分页结束 -->
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${request.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
<script src="${request.contextPath}/assets/js/moment.min.js"></script>
<script src="${request.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${request.contextPath}/assets/js/user/base.js"></script>
<script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="${request.contextPath}/assets/js/jquery-ui.min.js"></script>
<script src="${request.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="${request.contextPath}/assets/js/jquery.gritter.min.js"></script>
<!-- ace scripts -->
<script src="${request.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${request.contextPath}/assets/js/ace.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/loading.js"></script>
<script src="${request.contextPath}/assets/js/chosen.jquery.js"></script>
<script src="${request.contextPath}/assets/js/d3.v3.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/moment.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/daterangepicker.js"></script>
<script type="text/javascript" src="${request.contextPath}/javascripts/dateRange.js"></script>

<script type="text/javascript">

    d3.select(self.frameElement).style("height", "1000px");

    $(document).ready(function () {
        $(".chosen-select").chosen();
        $(".chosen-select-deselect").chosen({ allow_single_deselect: true });
        $("#app_search1").click();
        $("#Search").click();
    });

    $("#Search").on("click", function () {
        searchList(1, $("#pageSize").val());
    });

    // 查询产品信息
    function searchList(currentPage, pageSize) {
        var choose_date = $("#config-demo").val()+"";
        $.ajax({
            url : "${request.contextPath}/superfreetravel/clickVolume",
            data: {
                "currentPage": currentPage,
                "pageSize":pageSize,
                "chooseDate":choose_date
            },
            type: 'GET',
            beforeSend: function () {
                openPartialLayer($("#dynamic-table_wrapper"));
                $("#Search").attr("disabled", true);
            },
            success:function(result) {
                $("#dynamic-table_wrapper").css('height', '');
                var html = "<tr>";
                if(null != result && result.list != null && result.list.length > 0){
                    // 调整页码样式
                    changePageCss(result);
                    $.each(result.list, function (index, item) {
                        html += "<td style=\"vertical-align: middle;\">" + (index + 1) + "</td>" +
                            "<td style=\"vertical-align: middle;\">" + item.elemType+ "</td>" +
                            "<td style=\"vertical-align: middle;\">" + item.amount+ "</td>" +
                            //"<td style=\"vertical-align: middle;\">" + item.operDate+ "</td>" +
                            "</tr>" ;

                    });

                    var pageHtml = "<tr><td id=\"grid-pager_left\" align=\"left\"></td>" +
                        "<td id=\"grid-pager_center\" align=\"center\"  style=\"white-space: pre; width: 343px;\">" +
                        "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" " +
                        "style=\"table-layout: auto; margin-top: 10px;\" class=\"ui-pg-table\"><tbody>" +
                        "<tr><td id=\"first_grid-pager\" onclick=\"showPage('firstPage')\" " +
                        "class=\"ui-pg-button ui-corner-all ";

                    if(result.isFirstPage) {
                        pageHtml += "ui-state-disabled";
                    }

                    pageHtml += "\" style=\"cursor: pointer;\"><span " +
                        "class=\"ui-icon ace-icon fa fa-angle-double-left bigger-140\"></span></td>" +
                        "<td id=\"prev_grid-pager\" onclick=\"showPage('prePage')\" " +
                        "class=\"ui-pg-button ui-corner-all ";

                    if(result.isFirstPage) {
                        pageHtml += "ui-state-disabled";
                    }

                    pageHtml += "\" style=\"cursor: pointer;\"><span " +
                        "class=\"ui-icon ace-icon fa fa-angle-left bigger-140\"></span></td>" +
                        "<td dir=\"ltr\">Page <input class=\"ui-pg-input\" id=\"page_num\" " +
                        "type=\"text\" size=\"2\" maxlength=\"7\"  onblur='lifter()' " +
                        "value=\"" + result.pageNum + "\" role=\"textbox\"> of <span " +
                        "id=\"sp_1_grid-pager\">" + result.pages + "</span></td>" +
                        "<td id=\"next_grid-pager\" onclick=\"showPage('nextPage')\" " +
                        "class=\"ui-pg-button ui-corner-all ";

                    if(result.isLastPage) {
                        pageHtml += "ui-state-disabled";
                    }

                    pageHtml += "\" style=\"cursor: pointer;\"><span " +
                        "class=\"ui-icon ace-icon fa fa-angle-right bigger-140\"></span></td>" +
                        "<td id=\"last_grid-pager\" onclick=\"showPage('lastPage')\" " +
                        "class=\"ui-pg-button ui-corner-all ";

                    if(result.isLastPage) {
                        pageHtml += "ui-state-disabled";
                    }

                    pageHtml += "\" style=\"cursor: pointer;\"><span " +
                        "class=\"ui-icon ace-icon fa fa-angle-double-right bigger-140\"></span></td>" +
                        "</tr></tbody></table></td><td id=\"grid-pager_right\" align=\"right\">" +
                        "<div dir=\"ltr\" style=\"text-align: right; margin-top: 10px;\" class=\"ui-paging-info\">View " +
                        "<span id=\"view_start_row\">" + result.startRow + "</span> - <span id=\"view_end_row\">" +
                        result.endRow + "</span> of <span id=\"view_page_total\">" +
                        result.total + "</span></div></td></tr>";
                    $("#proPageTable tbody").html(pageHtml);
                } else {
                    $(".ui-jqgrid").hide();
                    html += "<td colspan=\"7\"><div class=\"alert alert-danger\" style=\"margin-bottom: 0px;\" role=\"alert\">没有记录!</div></td></tr>";
                }
                $("#dataTableBody").html(html);
            },
            complete: function () {
                removeLoading($("#dynamic-table_wrapper"));
                $("#Search").attr("disabled", false);
            },
            error: function (XMLHttpRequest) {
                console.log(XMLHttpRequest);
            }
        });
    }

    function lifter(){
        var pagenum=$("#page_num").val();
        var pageSize=$("#pageSize").val();
        if(pagenum=="" || pagenum==null)
            pagenum=1;
        searchList(pagenum,pageSize);
    }

    function isNull(str) {
        if(null == str || "" == str || (typeof str == "string" && str.trim() == "")) {
            return true;
        }
        return false;
    }

    // 页码样式
    function changePageCss(data) {
        if (data != null && data.pages > 1) {
            $("#currentPage").val(data.pageNum);
            $(".ui-jqgrid").show();
        } else {
            $(".ui-jqgrid").hide();
        }
    }

    // 翻页
    function showPage(param) {
        var pages = parseInt($("#sp_1_grid-pager")[0].innerText);
        var currentPage = parseInt($("#currentPage").val());
        var pageSize = $("#pageSize").val();
        var flag = 0;
        if ('firstPage' == param) {
            currentPage = 1;
        } else if ('prePage' == param) {
            if (currentPage == 1) {
                currentPage == 1;
                flag = 1;
            } else {
                currentPage = currentPage - 1;
            }
        } else if ('nextPage' == param) {
            if (currentPage == pages) {
                currentPage = pages;
                flag = 1;
            } else {
                currentPage = currentPage + 1;
            }
        } else if ('lastPage' == param) {
            currentPage = pages;
        }
        if (flag == 0) {
            searchList(currentPage, pageSize);
        }
    }

</script>
</body>
</html>